<template>
  <div>
    <el-row>
      <el-col :span="16" offset="4">
        <div style="margin-top: 10px">
          <el-table
            :data="tableData"
            border
            :summary-method="getSummaries"
            show-summary
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column
              header-align="center"
              prop="createTime"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="store"
              label="支付宝笔数">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="goodName"
              label="支付宝金额">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="goodNum"
              label="微信笔数">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="orderMoney"
              label="微信金额">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="goodNum1"
              label="现金笔数">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="paymentAmount"
              label="现金金额">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="numCount"
              label="抹零笔数">
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="moneyCount"
              label="抹零金额">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "FinancialCashierSummaryList",
    data() {
      return {
        tableData: [{
          createTime: '342424',
          store: '23',
          goodName: '34',
          goodNum:'43',
          orderMoney:'34',
          goodNum1:'43',
          paymentAmount:'43',
          numCount:'43',
          moneyCount:'43'
        }]
      }
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '汇总';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }
  }
</script>

<style scoped>

</style>
